<div class="animated fadeIn">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <strong>Brand Buttons</strong>
          <small>Usage ex.</small>
          <code style="text-transform:lowercase">&lt;button class="btn btn-brand btn-facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code>
        </div>
        <div class="card-body">
          <h6>Size Small
            <small>Add this class
              <code>.btn-sm</code>
            </small>
          </h6>
          <p>
            <button type="button" class="btn btn-brand btn-sm btn-facebook mr-1" style="margin-bottom: 4px">
              <i class="fa fa-facebook"></i>
              <span>Facebook</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-twitter mr-1" style="margin-bottom: 4px">
              <i class="fa fa-twitter"></i>
              <span>Twitter</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-linkedin mr-1" style="margin-bottom: 4px">
              <i class="fa fa-linkedin"></i>
              <span>LinkedIn</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-flickr mr-1" style="margin-bottom: 4px">
              <i class="fa fa-flickr"></i>
              <span>Flickr</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-tumblr mr-1" style="margin-bottom: 4px">
              <i class="fa fa-tumblr"></i>
              <span>Tumblr</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-xing mr-1" style="margin-bottom: 4px">
              <i class="fa fa-xing"></i>
              <span>Xing</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-github mr-1" style="margin-bottom: 4px">
              <i class="fa fa-github"></i>
              <span>Github</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-html5 mr-1" style="margin-bottom: 4px">
              <i class="fa fa-html5"></i>
              <span>HTML5</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-openid mr-1" style="margin-bottom: 4px">
              <i class="fa fa-openid"></i>
              <span>OpenID</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-stack-overflow mr-1" style="margin-bottom: 4px">
              <i class="fa fa-stack-overflow"></i>
              <span>StackOverflow</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-css3 mr-1" style="margin-bottom: 4px">
              <i class="fa fa-css3"></i>
              <span>CSS3</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-youtube mr-1" style="margin-bottom: 4px">
              <i class="fa fa-youtube"></i>
              <span>YouTube</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-dribbble mr-1" style="margin-bottom: 4px">
              <i class="fa fa-dribbble"></i>
              <span>Dribbble</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-google-plus mr-1" style="margin-bottom: 4px">
              <i class="fa fa-google-plus"></i>
              <span>Google+</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-instagram mr-1" style="margin-bottom: 4px">
              <i class="fa fa-instagram"></i>
              <span>Instagram</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-pinterest mr-1" style="margin-bottom: 4px">
              <i class="fa fa-pinterest"></i>
              <span>Pinterest</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vk mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vk"></i>
              <span>VK</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-yahoo mr-1" style="margin-bottom: 4px">
              <i class="fa fa-yahoo"></i>
              <span>Yahoo</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-behance mr-1" style="margin-bottom: 4px">
              <i class="fa fa-behance"></i>
              <span>Behance</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-dropbox mr-1" style="margin-bottom: 4px">
              <i class="fa fa-dropbox"></i>
              <span>Dropbox</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-reddit mr-1" style="margin-bottom: 4px">
              <i class="fa fa-reddit"></i>
              <span>Reddit</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-spotify mr-1" style="margin-bottom: 4px">
              <i class="fa fa-spotify"></i>
              <span>Spotify</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vine mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vine"></i>
              <span>Vine</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-foursquare mr-1" style="margin-bottom: 4px">
              <i class="fa fa-foursquare"></i>
              <span>Forsquare</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vimeo mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vimeo"></i>
              <span>Vimeo</span>
            </button>
          </p>
          <h6>Size Normal</h6>
          <p>
            <button type="button" class="btn btn-brand btn-facebook mr-1" style="margin-bottom: 4px">
              <i class="fa fa-facebook"></i>
              <span>Facebook</span>
            </button>
            <button type="button" class="btn btn-brand btn-twitter mr-1" style="margin-bottom: 4px">
              <i class="fa fa-twitter"></i>
              <span>Twitter</span>
            </button>
            <button type="button" class="btn btn-brand btn-linkedin mr-1" style="margin-bottom: 4px">
              <i class="fa fa-linkedin"></i>
              <span>LinkedIn</span>
            </button>
            <button type="button" class="btn btn-brand btn-flickr mr-1" style="margin-bottom: 4px">
              <i class="fa fa-flickr"></i>
              <span>Flickr</span>
            </button>
            <button type="button" class="btn btn-brand btn-tumblr mr-1" style="margin-bottom: 4px">
              <i class="fa fa-tumblr"></i>
              <span>Tumblr</span>
            </button>
            <button type="button" class="btn btn-brand btn-xing mr-1" style="margin-bottom: 4px">
              <i class="fa fa-xing"></i>
              <span>Xing</span>
            </button>
            <button type="button" class="btn btn-brand btn-github mr-1" style="margin-bottom: 4px">
              <i class="fa fa-github"></i>
              <span>Github</span>
            </button>
            <button type="button" class="btn btn-brand btn-html5 mr-1" style="margin-bottom: 4px">
              <i class="fa fa-html5"></i>
              <span>HTML5</span>
            </button>
            <button type="button" class="btn btn-brand btn-openid mr-1" style="margin-bottom: 4px">
              <i class="fa fa-openid"></i>
              <span>OpenID</span>
            </button>
            <button type="button" class="btn btn-brand btn-stack-overflow mr-1" style="margin-bottom: 4px">
              <i class="fa fa-stack-overflow"></i>
              <span>StackOverflow</span>
            </button>
            <button type="button" class="btn btn-brand btn-css3 mr-1" style="margin-bottom: 4px">
              <i class="fa fa-css3"></i>
              <span>CSS3</span>
            </button>
            <button type="button" class="btn btn-brand btn-youtube mr-1" style="margin-bottom: 4px">
              <i class="fa fa-youtube"></i>
              <span>YouTube</span>
            </button>
            <button type="button" class="btn btn-brand btn-dribbble mr-1" style="margin-bottom: 4px">
              <i class="fa fa-dribbble"></i>
              <span>Dribbble</span>
            </button>
            <button type="button" class="btn btn-brand btn-google-plus mr-1" style="margin-bottom: 4px">
              <i class="fa fa-google-plus"></i>
              <span>Google+</span>
            </button>
            <button type="button" class="btn btn-brand btn-instagram mr-1" style="margin-bottom: 4px">
              <i class="fa fa-instagram"></i>
              <span>Instagram</span>
            </button>
            <button type="button" class="btn btn-brand btn-pinterest mr-1" style="margin-bottom: 4px">
              <i class="fa fa-pinterest"></i>
              <span>Pinterest</span>
            </button>
            <button type="button" class="btn btn-brand btn-vk mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vk"></i>
              <span>VK</span>
            </button>
            <button type="button" class="btn btn-brand btn-yahoo mr-1" style="margin-bottom: 4px">
              <i class="fa fa-yahoo"></i>
              <span>Yahoo</span>
            </button>
            <button type="button" class="btn btn-brand btn-behance mr-1" style="margin-bottom: 4px">
              <i class="fa fa-behance"></i>
              <span>Behance</span>
            </button>
            <button type="button" class="btn btn-brand btn-dropbox mr-1" style="margin-bottom: 4px">
              <i class="fa fa-dropbox"></i>
              <span>Dropbox</span>
            </button>
            <button type="button" class="btn btn-brand btn-reddit mr-1" style="margin-bottom: 4px">
              <i class="fa fa-reddit"></i>
              <span>Reddit</span>
            </button>
            <button type="button" class="btn btn-brand btn-spotify mr-1" style="margin-bottom: 4px">
              <i class="fa fa-spotify"></i>
              <span>Spotify</span>
            </button>
            <button type="button" class="btn btn-brand btn-vine mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vine"></i>
              <span>Vine</span>
            </button>
            <button type="button" class="btn btn-brand btn-foursquare mr-1" style="margin-bottom: 4px">
              <i class="fa fa-foursquare"></i>
              <span>Forsquare</span>
            </button>
            <button type="button" class="btn btn-brand btn-vimeo mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vimeo"></i>
              <span>Vimeo</span>
            </button>
          </p>
          <h6>Size Large
            <small>Add this class
              <code>.btn-lg</code>
            </small>
          </h6>
          <p>
            <button type="button" class="btn btn-brand btn-lg btn-facebook mr-1" style="margin-bottom: 4px">
              <i class="fa fa-facebook"></i>
              <span>Facebook</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-twitter mr-1" style="margin-bottom: 4px">
              <i class="fa fa-twitter"></i>
              <span>Twitter</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-linkedin mr-1" style="margin-bottom: 4px">
              <i class="fa fa-linkedin"></i>
              <span>LinkedIn</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-flickr mr-1" style="margin-bottom: 4px">
              <i class="fa fa-flickr"></i>
              <span>Flickr</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-tumblr mr-1" style="margin-bottom: 4px">
              <i class="fa fa-tumblr"></i>
              <span>Tumblr</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-xing mr-1" style="margin-bottom: 4px">
              <i class="fa fa-xing"></i>
              <span>Xing</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-github mr-1" style="margin-bottom: 4px">
              <i class="fa fa-github"></i>
              <span>Github</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-html5 mr-1" style="margin-bottom: 4px">
              <i class="fa fa-html5"></i>
              <span>HTML5</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-openid mr-1" style="margin-bottom: 4px">
              <i class="fa fa-openid"></i>
              <span>OpenID</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-stack-overflow mr-1" style="margin-bottom: 4px">
              <i class="fa fa-stack-overflow"></i>
              <span>StackOverflow</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-css3 mr-1" style="margin-bottom: 4px">
              <i class="fa fa-css3"></i>
              <span>CSS3</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-youtube mr-1" style="margin-bottom: 4px">
              <i class="fa fa-youtube"></i>
              <span>YouTube</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-dribbble mr-1" style="margin-bottom: 4px">
              <i class="fa fa-dribbble"></i>
              <span>Dribbble</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-google-plus mr-1" style="margin-bottom: 4px">
              <i class="fa fa-google-plus"></i>
              <span>Google+</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-instagram mr-1" style="margin-bottom: 4px">
              <i class="fa fa-instagram"></i>
              <span>Instagram</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-pinterest mr-1" style="margin-bottom: 4px">
              <i class="fa fa-pinterest"></i>
              <span>Pinterest</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vk mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vk"></i>
              <span>VK</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-yahoo mr-1" style="margin-bottom: 4px">
              <i class="fa fa-yahoo"></i>
              <span>Yahoo</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-behance mr-1" style="margin-bottom: 4px">
              <i class="fa fa-behance"></i>
              <span>Behance</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-dropbox mr-1" style="margin-bottom: 4px">
              <i class="fa fa-dropbox"></i>
              <span>Dropbox</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-reddit mr-1" style="margin-bottom: 4px">
              <i class="fa fa-reddit"></i>
              <span>Reddit</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-spotify mr-1" style="margin-bottom: 4px">
              <i class="fa fa-spotify"></i>
              <span>Spotify</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vine mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vine"></i>
              <span>Vine</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-foursquare mr-1" style="margin-bottom: 4px">
              <i class="fa fa-foursquare"></i>
              <span>Forsquare</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vimeo mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vimeo"></i>
              <span>Vimeo</span>
            </button>
          </p>
        </div>
      </div>
    </div>
    <!--/.col-->

    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <strong>Brand Buttons</strong>
          <small>Only icons. Usage ex.</small>
          <code style="text-transform:lowercase">&lt;button class="btn btn-brand btn-facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code>
        </div>
        <div class="card-body">
          <h6>Size Small
            <small>Add this class
              <code>.btn-sm</code>
            </small>
          </h6>
          <p>
            <button type="button" class="btn btn-brand btn-sm btn-facebook mr-1" style="margin-bottom: 4px">
              <i class="fa fa-facebook"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-twitter mr-1" style="margin-bottom: 4px">
              <i class="fa fa-twitter"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-linkedin mr-1" style="margin-bottom: 4px">
              <i class="fa fa-linkedin"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-flickr mr-1" style="margin-bottom: 4px">
              <i class="fa fa-flickr"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-tumblr mr-1" style="margin-bottom: 4px">
              <i class="fa fa-tumblr"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-xing mr-1" style="margin-bottom: 4px">
              <i class="fa fa-xing"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-github mr-1" style="margin-bottom: 4px">
              <i class="fa fa-github"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-html5 mr-1" style="margin-bottom: 4px">
              <i class="fa fa-html5"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-openid mr-1" style="margin-bottom: 4px">
              <i class="fa fa-openid"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-stack-overflow mr-1" style="margin-bottom: 4px">
              <i class="fa fa-stack-overflow"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-css3 mr-1" style="margin-bottom: 4px">
              <i class="fa fa-css3"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-youtube mr-1" style="margin-bottom: 4px">
              <i class="fa fa-youtube"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-dribbble mr-1" style="margin-bottom: 4px">
              <i class="fa fa-dribbble"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-google-plus mr-1" style="margin-bottom: 4px">
              <i class="fa fa-google-plus"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-instagram mr-1" style="margin-bottom: 4px">
              <i class="fa fa-instagram"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-pinterest mr-1" style="margin-bottom: 4px">
              <i class="fa fa-pinterest"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vk mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vk"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-yahoo mr-1" style="margin-bottom: 4px">
              <i class="fa fa-yahoo"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-behance mr-1" style="margin-bottom: 4px">
              <i class="fa fa-behance"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-dropbox mr-1" style="margin-bottom: 4px">
              <i class="fa fa-dropbox"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-reddit mr-1" style="margin-bottom: 4px">
              <i class="fa fa-reddit"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-spotify mr-1" style="margin-bottom: 4px">
              <i class="fa fa-spotify"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vine mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vine"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-foursquare mr-1" style="margin-bottom: 4px">
              <i class="fa fa-foursquare"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vimeo mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vimeo"></i>
            </button>
          </p>
          <h6>Size Normal</h6>
          <p>
            <button type="button" class="btn btn-brand btn-facebook mr-1" style="margin-bottom: 4px">
              <i class="fa fa-facebook"></i>
            </button>
            <button type="button" class="btn btn-brand btn-twitter mr-1" style="margin-bottom: 4px">
              <i class="fa fa-twitter"></i>
            </button>
            <button type="button" class="btn btn-brand btn-linkedin mr-1" style="margin-bottom: 4px">
              <i class="fa fa-linkedin"></i>
            </button>
            <button type="button" class="btn btn-brand btn-flickr mr-1" style="margin-bottom: 4px">
              <i class="fa fa-flickr"></i>
            </button>
            <button type="button" class="btn btn-brand btn-tumblr mr-1" style="margin-bottom: 4px">
              <i class="fa fa-tumblr"></i>
            </button>
            <button type="button" class="btn btn-brand btn-xing mr-1" style="margin-bottom: 4px">
              <i class="fa fa-xing"></i>
            </button>
            <button type="button" class="btn btn-brand btn-github mr-1" style="margin-bottom: 4px">
              <i class="fa fa-github"></i>
            </button>
            <button type="button" class="btn btn-brand btn-html5 mr-1" style="margin-bottom: 4px">
              <i class="fa fa-html5"></i>
            </button>
            <button type="button" class="btn btn-brand btn-openid mr-1" style="margin-bottom: 4px">
              <i class="fa fa-openid"></i>
            </button>
            <button type="button" class="btn btn-brand btn-stack-overflow mr-1" style="margin-bottom: 4px">
              <i class="fa fa-stack-overflow"></i>
            </button>
            <button type="button" class="btn btn-brand btn-css3 mr-1" style="margin-bottom: 4px">
              <i class="fa fa-css3"></i>
            </button>
            <button type="button" class="btn btn-brand btn-youtube mr-1" style="margin-bottom: 4px">
              <i class="fa fa-youtube"></i>
            </button>
            <button type="button" class="btn btn-brand btn-dribbble mr-1" style="margin-bottom: 4px">
              <i class="fa fa-dribbble"></i>
            </button>
            <button type="button" class="btn btn-brand btn-google-plus mr-1" style="margin-bottom: 4px">
              <i class="fa fa-google-plus"></i>
            </button>
            <button type="button" class="btn btn-brand btn-instagram mr-1" style="margin-bottom: 4px">
              <i class="fa fa-instagram"></i>
            </button>
            <button type="button" class="btn btn-brand btn-pinterest mr-1" style="margin-bottom: 4px">
              <i class="fa fa-pinterest"></i>
            </button>
            <button type="button" class="btn btn-brand btn-vk mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vk"></i>
            </button>
            <button type="button" class="btn btn-brand btn-yahoo mr-1" style="margin-bottom: 4px">
              <i class="fa fa-yahoo"></i>
            </button>
            <button type="button" class="btn btn-brand btn-behance mr-1" style="margin-bottom: 4px">
              <i class="fa fa-behance"></i>
            </button>
            <button type="button" class="btn btn-brand btn-dropbox mr-1" style="margin-bottom: 4px">
              <i class="fa fa-dropbox"></i>
            </button>
            <button type="button" class="btn btn-brand btn-reddit mr-1" style="margin-bottom: 4px">
              <i class="fa fa-reddit"></i>
            </button>
            <button type="button" class="btn btn-brand btn-spotify mr-1" style="margin-bottom: 4px">
              <i class="fa fa-spotify"></i>
            </button>
            <button type="button" class="btn btn-brand btn-vine mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vine"></i>
            </button>
            <button type="button" class="btn btn-brand btn-foursquare mr-1" style="margin-bottom: 4px">
              <i class="fa fa-foursquare"></i>
            </button>
            <button type="button" class="btn btn-brand btn-vimeo mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vimeo"></i>
            </button>
          </p>
          <h6>Size Large
            <small>Add this class
              <code>.btn-lg</code>
            </small>
          </h6>
          <p>
            <button type="button" class="btn btn-brand btn-lg btn-facebook mr-1" style="margin-bottom: 4px">
              <i class="fa fa-facebook"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-twitter mr-1" style="margin-bottom: 4px">
              <i class="fa fa-twitter"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-linkedin mr-1" style="margin-bottom: 4px">
              <i class="fa fa-linkedin"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-flickr mr-1" style="margin-bottom: 4px">
              <i class="fa fa-flickr"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-tumblr mr-1" style="margin-bottom: 4px">
              <i class="fa fa-tumblr"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-xing mr-1" style="margin-bottom: 4px">
              <i class="fa fa-xing"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-github mr-1" style="margin-bottom: 4px">
              <i class="fa fa-github"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-html5 mr-1" style="margin-bottom: 4px">
              <i class="fa fa-html5"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-openid mr-1" style="margin-bottom: 4px">
              <i class="fa fa-openid"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-stack-overflow mr-1" style="margin-bottom: 4px">
              <i class="fa fa-stack-overflow"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-css3 mr-1" style="margin-bottom: 4px">
              <i class="fa fa-css3"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-youtube mr-1" style="margin-bottom: 4px">
              <i class="fa fa-youtube"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-dribbble mr-1" style="margin-bottom: 4px">
              <i class="fa fa-dribbble"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-google-plus mr-1" style="margin-bottom: 4px">
              <i class="fa fa-google-plus"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-instagram mr-1" style="margin-bottom: 4px">
              <i class="fa fa-instagram"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-pinterest mr-1" style="margin-bottom: 4px">
              <i class="fa fa-pinterest"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vk mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vk"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-yahoo mr-1" style="margin-bottom: 4px">
              <i class="fa fa-yahoo"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-behance mr-1" style="margin-bottom: 4px">
              <i class="fa fa-behance"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-dropbox mr-1" style="margin-bottom: 4px">
              <i class="fa fa-dropbox"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-reddit mr-1" style="margin-bottom: 4px">
              <i class="fa fa-reddit"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-spotify mr-1" style="margin-bottom: 4px">
              <i class="fa fa-spotify"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vine mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vine"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-foursquare mr-1" style="margin-bottom: 4px">
              <i class="fa fa-foursquare"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vimeo mr-1" style="margin-bottom: 4px">
              <i class="fa fa-vimeo"></i>
            </button>
          </p>
        </div>
      </div>
    </div>
    <!--/.col-->

    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <strong>Brand Buttons</strong>
          <small>Only text. Usage ex.</small>
          <code style="text-transform:lowercase">&lt;button class="btn btn-brand btn-facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code>
        </div>
        <div class="card-body">
          <h6>Size Small
            <small>Add this class
              <code>.btn-sm</code>
            </small>
          </h6>
          <p>
            <button type="button" class="btn btn-brand btn-sm btn-facebook mr-1" style="margin-bottom: 4px">
              <span>Facebook</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-twitter mr-1" style="margin-bottom: 4px">
              <span>Twitter</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-linkedin mr-1" style="margin-bottom: 4px">
              <span>LinkedIn</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-flickr mr-1" style="margin-bottom: 4px">
              <span>Flickr</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-tumblr mr-1" style="margin-bottom: 4px">
              <span>Tumblr</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-xing mr-1" style="margin-bottom: 4px">
              <span>Xing</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-github mr-1" style="margin-bottom: 4px">
              <span>Github</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-html5 mr-1" style="margin-bottom: 4px">
              <span>HTML5</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-openid mr-1" style="margin-bottom: 4px">
              <span>OpenID</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-stack-overflow mr-1" style="margin-bottom: 4px">
              <span>StackOverflow</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-css3 mr-1" style="margin-bottom: 4px">
              <span>CSS3</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-youtube mr-1" style="margin-bottom: 4px">
              <span>YouTube</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-dribbble mr-1" style="margin-bottom: 4px">
              <span>Dribbble</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-google-plus mr-1" style="margin-bottom: 4px">
              <span>Google+</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-instagram mr-1" style="margin-bottom: 4px">
              <span>Instagram</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-pinterest mr-1" style="margin-bottom: 4px">
              <span>Pinterest</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vk mr-1" style="margin-bottom: 4px">
              <span>VK</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-yahoo mr-1" style="margin-bottom: 4px">
              <span>Yahoo</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-behance mr-1" style="margin-bottom: 4px">
              <span>Behance</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-dropbox mr-1" style="margin-bottom: 4px">
              <span>Dropbox</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-reddit mr-1" style="margin-bottom: 4px">
              <span>Reddit</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-spotify mr-1" style="margin-bottom: 4px">
              <span>Spotify</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vine mr-1" style="margin-bottom: 4px">
              <span>Vine</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-foursquare mr-1" style="margin-bottom: 4px">
              <span>Forsquare</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vimeo mr-1" style="margin-bottom: 4px">
              <span>Vimeo</span>
            </button>
          </p>
          <h6>Size Normal</h6>
          <p>
            <button type="button" class="btn btn-brand btn-facebook mr-1" style="margin-bottom: 4px">
              <span>Facebook</span>
            </button>
            <button type="button" class="btn btn-brand btn-twitter mr-1" style="margin-bottom: 4px">
              <span>Twitter</span>
            </button>
            <button type="button" class="btn btn-brand btn-linkedin mr-1" style="margin-bottom: 4px">
              <span>LinkedIn</span>
            </button>
            <button type="button" class="btn btn-brand btn-flickr mr-1" style="margin-bottom: 4px">
              <span>Flickr</span>
            </button>
            <button type="button" class="btn btn-brand btn-tumblr mr-1" style="margin-bottom: 4px">
              <span>Tumblr</span>
            </button>
            <button type="button" class="btn btn-brand btn-xing mr-1" style="margin-bottom: 4px">
              <span>Xing</span>
            </button>
            <button type="button" class="btn btn-brand btn-github mr-1" style="margin-bottom: 4px">
              <span>Github</span>
            </button>
            <button type="button" class="btn btn-brand btn-html5 mr-1" style="margin-bottom: 4px">
              <span>HTML5</span>
            </button>
            <button type="button" class="btn btn-brand btn-openid mr-1" style="margin-bottom: 4px">
              <span>OpenID</span>
            </button>
            <button type="button" class="btn btn-brand btn-stack-overflow mr-1" style="margin-bottom: 4px">
              <span>StackOverflow</span>
            </button>
            <button type="button" class="btn btn-brand btn-css3 mr-1" style="margin-bottom: 4px">
              <span>CSS3</span>
            </button>
            <button type="button" class="btn btn-brand btn-youtube mr-1" style="margin-bottom: 4px">
              <span>YouTube</span>
            </button>
            <button type="button" class="btn btn-brand btn-dribbble mr-1" style="margin-bottom: 4px">
              <span>Dribbble</span>
            </button>
            <button type="button" class="btn btn-brand btn-google-plus mr-1" style="margin-bottom: 4px">
              <span>Google+</span>
            </button>
            <button type="button" class="btn btn-brand btn-instagram mr-1" style="margin-bottom: 4px">
              <span>Instagram</span>
            </button>
            <button type="button" class="btn btn-brand btn-pinterest mr-1" style="margin-bottom: 4px">
              <span>Pinterest</span>
            </button>
            <button type="button" class="btn btn-brand btn-vk mr-1" style="margin-bottom: 4px">
              <span>VK</span>
            </button>
            <button type="button" class="btn btn-brand btn-yahoo mr-1" style="margin-bottom: 4px">
              <span>Yahoo</span>
            </button>
            <button type="button" class="btn btn-brand btn-behance mr-1" style="margin-bottom: 4px">
              <span>Behance</span>
            </button>
            <button type="button" class="btn btn-brand btn-dropbox mr-1" style="margin-bottom: 4px">
              <span>Dropbox</span>
            </button>
            <button type="button" class="btn btn-brand btn-reddit mr-1" style="margin-bottom: 4px">
              <span>Reddit</span>
            </button>
            <button type="button" class="btn btn-brand btn-spotify mr-1" style="margin-bottom: 4px">
              <span>Spotify</span>
            </button>
            <button type="button" class="btn btn-brand btn-vine mr-1" style="margin-bottom: 4px">
              <span>Vine</span>
            </button>
            <button type="button" class="btn btn-brand btn-foursquare mr-1" style="margin-bottom: 4px">
              <span>Forsquare</span>
            </button>
            <button type="button" class="btn btn-brand btn-vimeo mr-1" style="margin-bottom: 4px">
              <span>Vimeo</span>
            </button>
          </p>
          <h6>Size Large
            <small>Add this class
              <code>.btn-lg</code>
            </small>
          </h6>
          <p>
            <button type="button" class="btn btn-brand btn-lg btn-facebook mr-1" style="margin-bottom: 4px">
              <span>Facebook</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-twitter mr-1" style="margin-bottom: 4px">
              <span>Twitter</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-linkedin mr-1" style="margin-bottom: 4px">
              <span>LinkedIn</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-flickr mr-1" style="margin-bottom: 4px">
              <span>Flickr</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-tumblr mr-1" style="margin-bottom: 4px">
              <span>Tumblr</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-xing mr-1" style="margin-bottom: 4px">
              <span>Xing</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-github mr-1" style="margin-bottom: 4px">
              <span>Github</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-html5 mr-1" style="margin-bottom: 4px">
              <span>HTML5</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-openid mr-1" style="margin-bottom: 4px">
              <span>OpenID</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-stack-overflow mr-1" style="margin-bottom: 4px">
              <span>StackOverflow</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-css3 mr-1" style="margin-bottom: 4px">
              <span>CSS3</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-youtube mr-1" style="margin-bottom: 4px">
              <span>YouTube</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-dribbble mr-1" style="margin-bottom: 4px">
              <span>Dribbble</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-google-plus mr-1" style="margin-bottom: 4px">
              <span>Google+</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-instagram mr-1" style="margin-bottom: 4px">
              <span>Instagram</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-pinterest mr-1" style="margin-bottom: 4px">
              <span>Pinterest</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vk mr-1" style="margin-bottom: 4px">
              <span>VK</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-yahoo mr-1" style="margin-bottom: 4px">
              <span>Yahoo</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-behance mr-1" style="margin-bottom: 4px">
              <span>Behance</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-dropbox mr-1" style="margin-bottom: 4px">
              <span>Dropbox</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-reddit mr-1" style="margin-bottom: 4px">
              <span>Reddit</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-spotify mr-1" style="margin-bottom: 4px">
              <span>Spotify</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vine mr-1" style="margin-bottom: 4px">
              <span>Vine</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-foursquare mr-1" style="margin-bottom: 4px">
              <span>Forsquare</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vimeo mr-1" style="margin-bottom: 4px">
              <span>Vimeo</span>
            </button>
          </p>
        </div>
      </div>
    </div>
    <!--/.col-->
  </div>
  <!--/.row-->
</div>
